<#include "/learn/utils/ui.ftl"/>
<@layout>
    <link rel='stylesheet' media='all' href='${base}/dist/css/plugins.css'/>
    <!-- datepicker -->
    <link href="${base}/dist/vendors/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet">
    <script src="${base}/dist/vendors/moment/2.29.1/moment-with-locales.min.js"></script>
    <script src="${base}/dist/vendors/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <section class="content-header">
        <h1>卡片内容编辑</h1>
        <ol class="breadcrumb">
            <li><a href="${base}/learn">首页</a></li>
            <li><a href="${base}/learn/doc/list">卡片管理</a></li>
            <li class="active">卡片内容编辑</li>
        </ol>
    </section>
    <section class="content container-fluid">
        <div class="row">
            <form id="qForm" method="post" action="${base}/learn/doc/update">
                <#if view??>
                    <input type="hidden" name="id" value="${view.id}"/>
                </#if>
                <input type="hidden" name="status" value="${view.status!0}"/>
                <input type="hidden" name="editor" value="${editor!'tinymce'}"/>
                <div class="col-md-9 side-left">
                    <div class="box">
                        <div class="box-header with-border">
                            <h3 class="box-title">卡片编辑</h3>
                        </div>
                        <div class="box-body">
                            <div class="form-group">
                                <input type="text" class="form-control" name="title" value="${view.title}"
                                       maxlength="64" placeholder="卡片标题" required>
                            </div>
                            <div class="form-group">
                                <#include "/learn/editor/${editor}.ftl"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 side-right">
                    <div class="box">
                        <div class="box-body">
                            <div class="form-group">
                                <label>卡片集</label>
                                <select class="form-control" name="contentTypeId">
                                    <option value="0">全部卡片</option>
                                    <#list contentTypes as row>
                                        <option value="${row.id}" <#if (view.contentTypeId == row.id)> selected </#if>>${row.name}</option>
                                    </#list>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>复习开始时间</label>
                                <div class='input-group date' id='validTime'>
                                    <input type='text' class="form-control" name="validTime" value="${view.validTime}"/>
                                    <span class="input-group-addon">
                                 <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                                </div>
                            </div>
                        </div>
                        <div class="box-footer">
                            <button type="button" class="btn btn-primary btn-sm pull-right" event="doc_submit">保存
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <script type="text/javascript">
        $(function () {
            $('button[event="doc_submit"]').click(function () {
                $("form").submit();
            });
            $('#validTime').datetimepicker({
                format: 'YYYY-MM-DD HH:mm',
                locale: moment.locale('zh-cn')/*,
                minDate: '${minDate}' ,
                minTime: '5:00',
                maxTime: '23:00',
                onClose: function (current_time, $input) {
                    const validTime = $input.datetimepicker('getValue').formatTime('YYYY-MM-DD HH:mm');
                    console.log(validTime)
                }*/
            });
            //$('#validTime').val('${view.validTime}');

            $("form").submit(function () {
                if (typeof tinyMCE == "function") {
                    tinyMCE.triggerSave();
                }
            }).validate({
                ignore: "",
                rules: {
                    title: "required",
                    content: {
                        required: true,
                        check_editor: true
                    }
                },
                errorElement: "em",
                errorPlacement: function (error, element) {
                    error.addClass("help-block");

                    if (element.prop("type") === "checkbox") {
                        error.insertAfter(element.parent("label"));
                    } else if (element.is("textarea")) {
                        error.insertAfter(element.next());
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).closest("div").addClass("has-error").removeClass("has-success");
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).closest("div").addClass("has-success").removeClass("has-error");
                }
            });

        });
    </script>
</@layout>
